<template>
    <div>
        <el-row style="margin-bottom:20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item v-if='showPage==1'>用户信息</el-breadcrumb-item>
                <el-breadcrumb-item v-if='showPage==2'>新增用户</el-breadcrumb-item>
                <el-breadcrumb-item v-if='showPage==3'>修改用户</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <el-row v-show='showPage==1'>
            <el-row :gutter="10">
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addUser'>新增用户</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
            <el-table :data='table.tableData' border stripe style="width:100%" size="small" :highlight-current-row="true" ref="multipleTable">
                <el-table-column label="编号" prop="userId" min-width="100"></el-table-column>
                <el-table-column label="用户名" prop="username" min-width="150"></el-table-column>
                <el-table-column label="姓名" prop="realName" min-width="150"></el-table-column>
                <el-table-column label="是否可用" min-width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.usable==1" style="color:#67C23A">可用</span>
                        <span v-if="scope.row.usable==0" style="color:#F56C6C">不可用</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime" min-width="150"></el-table-column>
                <el-table-column label="上次登录" prop="lastLoginTime" min-width="150"></el-table-column>
                <el-table-column label="操作" min-width="180">
                    <template slot-scope="scope">
                        <template v-if='scope.row.username!=username'>
                        <el-button class="my-detail-button" type="text" v-if='scope.row.usable==0' @click="userUsable(scope.row)">启用</el-button>
                        <el-button class="my-detail-button" type="text" v-if='scope.row.usable==0' @click="userDelete(scope.row)">删除</el-button>
                        <el-button class="my-detail-button" type="text" v-if='scope.row.usable==1' @click="userDisable(scope.row)">禁用</el-button>
                        <el-button class="my-detail-button" type="text" @click="resetPass(scope.row)">重置密码</el-button>
                        <el-button class="my-detail-button" type="text" @click="modify(scope.row)">修改</el-button>
                        </template>
                        
                    </template>
                </el-table-column>
            </el-table>
            </el-row>
        </el-row>

        <!--新增/修改-->
        <el-row v-show="showPage==2||showPage==3">
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-form style="margin-top:10px;" label-position='right' label-width='80px' :model='addForm'
                ref='addForm' size='small' :rules='addForm.rules'>
                    <el-form-item label="用户名" prop="username">
                        <el-input :disabled="!addForm.isCreate" style="width:200px;" v-model="addForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="realName">
                        <el-input style="width:200px;" v-model="addForm.realName" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item v-if='addForm.isCreate' label="密码" prop="password">
                        <el-input type="password" style="width:200px;" v-model="addForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item v-if='addForm.isCreate' label="确认密码" prop="rePass">
                        <el-input type="password" style="width:200px;" v-model="addForm.rePass" placeholder="请输入确认密码"></el-input>
                    </el-form-item>
                    <el-form-item label='是否可用' prop='usable'>
                        <el-switch v-model="addForm.usable"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                </el-form-item>
                </el-form>
            </el-row>
        </el-row>
    </div>
</template>

<script>
export default {
    
    data(){

        let validPass = (rules, value, callback) => {
            if(value==''){
                callback(new Error('请输入确认密码'));
            }else if(value != this.addForm.password){
                callback(new Error('两次输入密码不一致'));
            }else {
                callback()
            }
        }

        return {
            showPage: 1,
            username: '',
            table: {
                tableData: [],
                currentPage: 1,
                pageSize: 100,
                rowCount: 0,
            },
            addForm: {
                isCreate: '',
                userId: '',
                username: '',
                realName: '',
                password: '',
                rePass: '',
                usable: true,
                rules: {
                    username: [
                        { required: true, message: "请输入用户名", trigger: "blur" },
                        {
                            min: 4,
                            max: 12,
                            message: "长度4-12之间"
                        }
                    ],
                    realName: [
                        { required: true, message: "请输入姓名", trigger: "blur" },
                    ],
                    password: [
                        { required: true, message: "请输入密码", trigger: "blur" },
                        {
                            min: 6,
                            max: 12,
                            message: "长度6-12之间"
                        }
                    ],
                    rePass: [
                        {validator: validPass, trigger: 'blur'}
                    ],
                    usable: [
                        {required: true, message: '请选择是否可用', trigger: 'blur'}
                    ],
                }
            }
        }
    },

    methods: {
        getTableData(){
            let p = {};
            let url = '/api/member/list';
            p.start = (this.table.currentPage - 1) * this.table.pageSize;
            p.num = this.table.pageSize;
            this.$http.fetch(url, p)
            .then(res => {
                this.table.tableData = res.data.rows;
                this.table.rowCount = res.data.total;
            })
        },

        init(){
            this.username = sessionStorage.getItem("username");
        },

        userUsable(row){
             this.$confirm('确定启用吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/member/usable';
                p.userId = row.userId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        userDisable(row){
             this.$confirm('确定禁用吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/member/disable';
                p.userId = row.userId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        resetPass(row){
            this.$confirm('确定重置密码吗? 重置后密码为123456', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/member/resetPass';
                p.userId = row.userId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        userDelete(row){
            this.$confirm('确定删除该用户吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                })
            .then(() => {
                let p = {};
                let url = '/api/member/delete';
                p.userId = row.userId
                return this.$http.fetch(url, p)
            })
            .then(()=>{
                this.getTableData();
            })
            .catch(()=>{

            })
        },

        addUser(){
            this.addForm.isCreate = true;
            this.addForm.username = '';
            this.addForm.realName = '';
            this.addForm.password = '';
            this.addForm.rePass = '';
            this.addForm.usable = true;
            this.$refs['addForm'].clearValidate();
            this.showPage = 2;
        },

        addBack(){
            this.showPage = 1;
        },

        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    let p = {};
                    let url = '';
                    if(!this.addForm.isCreate){
                        p.userId = this.addForm.userId;
                        url = '/api/member/modify';
                    }else{
                        url = '/api/member/add';
                        p.password = this.addForm.password;
                        p.username = this.addForm.username;
                    }
                    p.realName = this.addForm.realName;
                    p.usable = this.addForm.usable ? 1 : 0;

                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.getTableData();
                        this.showPage = 1;
                    })
                }

            });
        },

        modify(row){
            this.addForm.isCreate = false;
            this.addForm.userId = row.userId;
            this.addForm.username = row.username;
            this.addForm.realName = row.realName;
            this.addForm.usable = row.usable==1 ? true : false;
            this.$refs['addForm'].clearValidate();
            this.showPage = 3;
        }

    },

    mounted(){
        this.init();
        this.getTableData();
    }
}
</script>

<style scoped>
/* .my-detail-button{
    padding: 0px !important;
} */
</style>